<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员登陆</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.css">
    <link rel="stylesheet" href="/static/admin/css/login.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"></script>
<style>
    .captcha {width:56%;display:inline-block;}
    .captcha-img {display:inline-block;width:42%;float:right;}
    .captcha-img img {border:1px solid #e6e6e6;height:36px;width:100%;}
</style>
</head>

<body id="login">
<div class="login">
    <h2>管理员登录</h2>
    <form class="layui-form" method="post" action="">
        <div class="layui-form-item">
            <input type="text" name="username" placeholder="用户名" class="layui-input" autocomplete="off" lay-verify="required|account">
            <i class="layui-icon input-icon">&#xe66f;</i>
        </div>
        <div class="layui-form-item">
            <input type="password" name="password" placeholder="密码" class="layui-input" autocomplete="off" lay-verify="required|password">
            <i class="layui-icon input-icon">&#xe673;</i>
        </div>
        <div class="layui-form-item">
            <input type="text" name="captcha" lay-verify="required|captcha" placeholder="验证码" autocomplete="off" class="layui-input verification captcha" value="">
            <i class="layui-icon input-icon">&#xe679;</i>
            <div class="captcha-img">
                <img id="captchaPic" src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?r='+Math.random();">
            </div>
        </div>
        <div class="layui-form-item">
            <button style="width: 100%" class="layui-btn" lay-submit lay-filter="login">立即登录</button>
        </div>
    </form>

<script>
    layui.use('form', function () {
        const form = layui.form;
        const layer = layui.layer;
        form.on('submit(login)', function(data) {
            var ii = layer.load({ shade: 0.5 });
            $.ajax({
                url: '?',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    layer.close(ii)
                    if (res.code === 0) {
                        layer.msg('登录成功，正在跳转到首页', {icon: 1,shade: 0.01,time: 15000});
                        window.location = './index.html';
                    }else{
                        layer.alert(res.msg, {icon: 2})
                    }
                }
            });
            return false;
        });
    });
</script>
</div>
</body>

</html>